<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="聊天框">
    <div id="聊天标题">甄嬛传聊天室</div>
    <div id="主体">
        <div id="左部分">
            <div id="聊天内容区">
                <ol>
                </ol>   <!-- 最终显示聊天内容的区域 -->
            </div>
            <div id="聊天输入区">
                <textarea id="输入框"></textarea>
                <a id="发送按钮">发送(s)</a>
            </div>
        </div>
        <div id="右部分">
            <div id="群成员总计">群成员 5/15</div>
            <div id="群成员名单">
                <ol>
                    <li>
                        <div class="群成员头像">
                            <img src="http://img.wxcha.com/m00/98/e2/1defb6b4d898a94b8832287e503a0153.jpg">
                        </div>
                        <div class="群成员昵称">甄嬛</div>
                    </li>
                    <li class="不在线">
                        <div class="群成员头像">
                            <img src="http://img.wxcha.com/m00/98/e2/1defb6b4d898a94b8832287e503a0153.jpg">
                        </div>
                        <div class="群成员昵称">华妃</div>
                    </li>
                </ol>   <!-- 最终显示群成员名单的区域 -->
            </div>
        </div>
    </div>
</div>

<script src="/js/index.js"></script>
</body>
</html>